<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> 
    <!--
      面试题：react、vue 中的 key 有什么作用？(key 的内部原理)
          1.虚拟 DOM 中 key 的作用：
              key 是 虚拟 DOM 对象的标识，当状态中的数据发生变化时，
              Vue 会根据【新数据】生成【新的虚拟 DOM】。
              随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较，比较规则如下
          2.对比规则：
              旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
                  若虚拟 DOM 中内容没变，直接使用之前的真实 DOM !
                  若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换页面中之前的真实 DOM。
              旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：
                  创建新的真实 DOM ，随后渲染到页面。
          3.用 index 作为 key 可能引发的问题：
              若对数据进行：逆序添加、逆序删除等破坏顺序操作
                  会产生没有必要的真实 DOM 更新 ==> 页面小贵没问题，但效率低。
              若结构中还包含输入类的 DOM：会产生错误 DOM 更新 ==> 界面有问题。
          4.开发中如何选择 key？
              最好使用每天数据的唯一标识作为 key，比如 id，手机号，邮箱，身份证号，学号等唯一值。
              如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                  使用 index 作为 key 是没有问题的。    
    -->
    <!-- 准备一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表(遍历数组) 最常用</h2>
      <button @click.once="add">点我添加老刘信息</button>
      <ul>
        <li v-for="(p,index) in persons" :key="p.id">
          {{p.name}} - {{p.age}}
          <input type="text">
        </li>
      </ul>

      
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data:{
          persons: [
            {id:'001', name:'张三', age: 18},
            {id:'002', name:'李四', age: 19},
            {id:'003', name:'王五', age: 20},
          ], 
        },
        methods: {
          add(){
            const p = {id:'004', name:'老刘', age:30}
            this.persons.unshift(p)
          }
        },
    })
</script>
</html>